<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>爱车报告</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/guan.css" />
    <style>
        .products-list span{color: #666666}
        .am-btn.am-radius{border-radius: 5px}
        .products-list{display:block;width:100%;height: 100%;background-color: #ffffff;padding-bottom: 10px;border-bottom: 1px solid #d2d2d2;}
        .products-list p{line-height: 20px}
        .products-list .lp{
            height: 100%;
            padding: 10px;
            font-size: 13px;
            text-indent: 2em;
            color: #333333;
        }
        .am-accordion-basic{margin:0;}
        .am-accordion-title{font-size: 15px;}
        .am-accordion-item{padding: 0 1em; border-bottom: 1px solid #d2d2d2}
        .am-accordion-basic .am-active .am-accordion-title{color: #333333;position: relative}
        .am-accordion-basic .am-accordion-title{padding:.8rem 0;}
        .am-accordion-content{padding: 0}
        .am-list{margin-bottom: 0}

        section#kuaikuai-port .am-list li span{display:inline-block;padding:.15rem 0;margin:.8rem 0}
        section#kuaikuai-port .am-list li span.te{text-align:center;color:#666;border-right:1px solid #dedede;border-left:1px solid #dedede}
        section#kuaikuai-port .am-list li span.last{text-align:center;color:#999}

        .am-accordion-basic .am-accordion-title:after {
            display: inline-block;
            color: #fff;
            background: #e4393c;
            width: 20px;
            height: 20px;
            position: relative;
            border-radius: 12px;
            font-size: 10px;
            line-height: 20px;
            text-align: center;
            left: 75%;
        }

        .title-1:after{
            content: "2";
        }

        .title-2:after{
            content: "2";
        }

        .title-3:after{
            content: "2";
        }

        .title-4:after{
            content: "2";
        }

        .ball{
            display: inline-block;
            color: #fff;
            background: #e4393c;
            width: 20px;
            height: 20px;
            position: relative;
            border-radius: 12px;
            font-size: 10px;
            line-height: 20px;
            text-align: center;
            left: 75%;
        }
    </style>
</head>
<body>
<header data-am-widget="header" class="am-header">
    <h1 class="am-header-title">检测记录</h1>
</header>

<div class="products-list clearfix">
    <p class="am-u-sm-12 lp">
        在过去的12天中，阁下驾驶爱车行驶了3600公里。经检测，您的爱车车况良好，
        请继续保持优秀的用车习惯。爱车管家是您真诚的用车伴侣！
    </p>
    <span class="am-u-sm-6 report">报告检测日期</span>
    <span class="am-u-sm-6 am-text-right">2015年5月12日</span>
</div>

<div style="margin:15px 10px">
    <button type="button" class="am-btn am-radius am-btn-danger am-btn-block" style="width:100%;height: 44px;">检测记录</button>
</div>

<section id="kuaikuai-port" data-am-widget="accordion" style="background-color: #FFFFFF;border-top: 1px solid #d2d2d2" class="am-accordion am-accordion-basic"
         data-am-accordion='{  }'>
    <dl class="am-accordion-item am-active">
        <dt class="am-accordion-title title ">雨刮 <span class="ball">1</span></dt>
        <dd class="am-accordion-bd am-collapse am-in">
            <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
            <div class="am-accordion-content">

                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">前后保险杠</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">优</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">无需更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">全车灯光/灯罩</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">良</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">建议更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">雨刮刷</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">差</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">急需更换</span>
                        </li>
                    </ul>
                </div>

            </div>
        </dd>
    </dl>
    <dl class="am-accordion-item">
        <dt class="am-accordion-title title ">轮胎</dt>
        <dd class="am-accordion-bd am-collapse ">
            <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
            <div class="am-accordion-content">

                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">前后保险杠</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">优</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">无需更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">全车灯光/灯罩</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">良</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">建议更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">雨刮刷</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">差</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">急需更换</span>
                        </li>
                    </ul>
                </div>

            </div>
        </dd>
    </dl>
    <dl class="am-accordion-item">
        <dt class="am-accordion-title title ">机油</dt>
        <dd class="am-accordion-bd am-collapse ">
            <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
            <div class="am-accordion-content">

                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">前后保险杠</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">优</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">无需更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">全车灯光/灯罩</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">良</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">建议更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">雨刮刷</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">差</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">急需更换</span>
                        </li>
                    </ul>
                </div>

            </div>
        </dd>
    </dl>
    <dl class="am-accordion-item">
        <dt class="am-accordion-title title ">车灯</dt>
        <dd class="am-accordion-bd am-collapse ">
            <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
            <div class="am-accordion-content">
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">前后保险杠</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">优</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">无需更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">全车灯光/灯罩</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">良</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">建议更换</span>
                        </li>
                        <li class="am-g">
                            <span href="#" class="am-u-sm-5 am-list-item-hd">雨刮刷</span>
                            <span href="#" class="am-u-sm-3 am-list-item-hd te">差</span>
                            <span href="#" class="am-u-sm-4 am-list-item-hd last">急需更换</span>
                        </li>
                    </ul>
                </div>

            </div>
        </dd>
    </dl>
</section>


<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {

    });
</script>
</body>
</html>